<template>
	<div class="wx-login">
		<image class="logo" src="/static/logo.jpg"></image>
		<div class="title">醉美百和</div>
		<u-button color="#5760ed" size="large" open-type="getPhoneNumber" @getphonenumber="getphonenumber">授权登录</u-button>
	</div>
</template>

<script setup>
import { wxLogin, getInfo } from '/http/api.js'

const getphonenumber = async (e) => {
	const wxInfo = e.detail || {}
	uni.login({
		provider: "weixin",
		success: async function(event){
			const { code } = event
			console.log(event);
			const data = {
				code: code,
				encryptedData: wxInfo.encryptedData,
				iv: wxInfo.iv
			}
			try {
				const res = await wxLogin(data)
				const resData = res.data || {}
				uni.setStorageSync('token', resData.access_token)
				const r = await getInfo()
				uni.setStorageSync('userInfo', r.user)
				uni.redirectTo({
					url: '/pages/index/index'
				})
			} catch (error) {
				//TODO handle the exception
			}
		},
		fail: function (err) {}
	})
}
</script>

<style lang="scss">
.wx-login{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24rpx;
	box-sizing: border-box;
	min-height: 100vh;
	background-color: #fff;
	.title{
		color: #333;
		font-size: 40rpx;
		margin: 100rpx 0;
	}
	.logo{
		width: 200rpx;
		height: 200rpx;
		margin-top: 200rpx;
	}
}   
</style>
